<template>
  <view>
    <!--页面标题头begin-->
    <view class="smart-page-head">
      <view class="smart-page-head-title">button按钮</view>
    </view>
    <!--页面标题头end-->
    <view>
      <button type="primary">页面主操作 normal</button>
      <button class="btn" type="primary" :loading="isLoading" @click="btnSave">页面主操作 loading</button>
      <button type="default" disabled="false">页面次操作</button>
      <button type="warn">警告操作 warn</button>
      <button type="primary" plain="true">镂空按钮 plain</button>
      <button type="primary" size="mini" class="minibutn">mini按钮</button>
    </view>
  </view>
</template>

<script>
	export default{
		data(){
			return{
				isLoading:false
			}
		},
		methods:{
			btnSave(){
				this.isLoading = true;
				uni.showLoading({
					title:"数据加载中...",
					
				});
				setTimeout(()=>{
					this.isLoading=false;
					uni.hideLoading();
				},5000)
			}
		}
	}
</script>

<style>
	.button{
		margin: 30upx;
	}
	
	.btn{
		margin: 10upx;
	}
	
	.minbutn{
		background-color: #4CD964;
		color:#333333;
		width:200upx;
	}
</style>